<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible"  :modal-append-to-body="true"
               :append-to-body="true"
               :fullscreen="false" @close="close">

        <avue-form :option="option" v-model="formModel" ref="form">
            <template slot="menuForm">

                <div slot="footer" class="dialog-footer">
                    <el-button icon="el-icon-close" type="primary" @click="handleSubmit" :loading="loading">提 交</el-button>
                    <el-button icon="el-icon-check" @click="close">取 消</el-button>
                </div>
            </template>
        </avue-form>

    </el-dialog>
</template>

<script>
    export default {
        name: "iot-form-dialog",
        model: {
            prop: 'form',//指向props的参数名
            event: 'click'//事件名称
        },
        props:{
            title:{
                type:String
            },
            visible:{
                type:Boolean
            },
            option:{
                type:Object
            },
            form:{
                type:Object
            }
        },
        watch:{
            visible(val) {
                this.dialogFormVisible = val;
            },
            form(val){
                this.formModel=val
            }
        },
        data() {
            return {
                loading:false,
                dialogFormVisible:false,
                formModel:this.form,
            }
        },
        methods:{
            close(){
                this.dialogFormVisible = false;
                this.$refs.form.resetForm();
                this.$emit('update:visible', false)
            },
            handleSubmit(){
                this.loading=true;
                this.$emit('handleSubmit', this.formModel,this.done);
                this.$emit('handleUpd', this.formModel,this.done);
            },
            done(){
                this.loading=false;
                this.dialogFormVisible = false;
                this.$emit('update:visible', false)
            },
            handleEmpty(){}
        }
    }
</script>

<style scoped>
.dialog-footer{
    text-align: right;
}
</style>
